import React, { Fragment } from 'react'
import { StyleSheet, Animated, Easing, LayoutAnimation } from 'react-native'
import JPushModule from 'jpush-react-native'
import BasePage from 'src/pageP/base/base-page/index'
import RefreshState from 'src/components/custom-flat-list/RefreshState'
import { homeFamousList } from 'src/utils/RequestAPI'
import { ScaleS, STATUSBAR_HEIGHT, WIDTH } from 'src/utils/ScreenUtil'
import ScrollTabView from 'src/components/scroll-tab-view/index'
import HomeBanner from 'src/components/banner/index'
import TabHeaderBanner from './components/TabHeaderBanner'
import HomeHeader from './components/HomeHeader'
import { HEIGHT, IS_IOS, NAVIGATIONBAR_BOTTOM_HEIGHT, ONE_PIXEL, ScaleT } from '../../../utils/ScreenUtil'
import { education } from 'src/utils/ConfigUtil'
import { getAreaListByCityName, getIndustryCategory } from '../../../utils/RequestAPI'
import EmptyView from '../../../components/empty-view/index'
import { iosAppFilter } from '../../../utils/ConfigUtil'
import NavigationUtil from '../../../utils/NavigationUtil'
import FamousSwiper, { FamousSwiperHeight } from './components/FamousSwiper'
import TabFilter from './components/TabFilter'
import FilterContent from './components/FilterContent'
import { DismissLoading, ShowLoading } from 'src/utils/ToastUtil'

const filterViewMaxH = ScaleS(400)
const searchHeight = STATUSBAR_HEIGHT + ScaleS(20) + ScaleS(42)
const bannerHeight = (WIDTH - ScaleS(40)) * 150 / 335 + 26 + ScaleS(15)
const topViewHeight = ScaleS(31) + ScaleS(46) + ScaleS(52) + ONE_PIXEL
const SUCCESS = 'success'
const ERROR = 'error'
const AnimatedScrollTabView = Animated.createAnimatedComponent(ScrollTabView)

class BaseHomePage extends BasePage {
  constructor (props) {
    super(props)
    this.FamousSwiperHeightAdded = false
    this.moveAbleHeight = searchHeight + bannerHeight
    const { landmark: { cityName } } = props
    this.state = {
      dataArr: [],
      hideItem: false,
      scrollEnabled: true,
      pushMsg: '',
      banners: [
        {
          source: require('src/imgC/home/banner1.png')
        },
        {
          source: require('src/imgC/home/banner2.png')
        },
        {
          source: require('src/imgC/home/banner3.png')
        }],
      famous: null,
      filterArr: this._initFilterArr()
    }
    this.currentIndex = 0
    this.flatScroll = 0
    this.tabScroll = [
      {
        tabLabel: '兼职',
        cityName: cityName,
        scrollValue: 0,
        industries: [],
        endRefreshState: RefreshState.Idle,
        filterArr: this._initFilterArr(),
        dataArr: []
      },
      {
        tabLabel: '实习',
        cityName: cityName,
        scrollValue: 0,
        industries: [],
        endRefreshState: RefreshState.Idle,
        filterArr: this._initFilterArr(),
        dataArr: []
      },
      {
        tabLabel: '全职',
        cityName: cityName,
        scrollValue: 0,
        industries: [],
        endRefreshState: RefreshState.Idle,
        filterArr: this._initFilterArr(),
        dataArr: []
      }
    ]
    this.tabLabels = this.tabScroll.map((item) => {
      return item.tabLabel
    })
    this.filterContentMaxH = new Animated.Value(0)
    this.filterOpacity = new Animated.Value(0)
    this.renderItem = this.renderItem.bind(this)
    this.postFunc = this.postFunc.bind(this)
    this._closeAnimated = this._closeAnimated.bind(this)
    this._setFilterText = this._setFilterText.bind(this)
    this.snapshotBeforeUpdate = this.snapshotBeforeUpdate.bind(this)
    this.changeRefresh = this.changeRefresh.bind(this)
    this.educationArr = this._getEducationArr()
    this.areaArr = []
    this.flatScroll = 0
    this.flatScrollValue = new Animated.Value(0)
    this.searchOpacity = this.flatScrollValue.interpolate({
      inputRange: [searchHeight, this.moveAbleHeight],
      outputRange: [0, 1],
      extrapolate: 'clamp'
    })
  }

  _initFilterArr = () => {
    return [
      {
        label: '排序',
        isActive: false
      },
      {
        label: '职位',
        isActive: false
      },
      {
        label: '区域',
        isActive: false
      },
      {
        label: '学历',
        isActive: false
      }
    ]
  }

  _getEducationArr = () => {
    const educationContent = education.reduce((totalValue, currentItem) => {
      const item = {
        label: currentItem.key,
        value: currentItem.educationValue,
        type: 'education'
      }
      totalValue.push(item)
      return totalValue
    }, [{
      label: '全部',
      type: 'education',
      isAll: true
    }])

    return [{
      title: '学历',
      content: educationContent
    }]
  }

  componentDidMount () {
    this._onRequestRefresh(true)
    this._getAreaListByCityName()
    this._homeFamousList()
    this._initIndustryCategory()
  }

  getSnapshotBeforeUpdate (prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate', prevProps, this.props)
    if (prevProps.landmark.cityName !== this.props.landmark.cityName) { // props城市改变
      this.cityChanged()
    }
    this.snapshotBeforeUpdate(prevProps, prevState)
    return null
  }

  snapshotBeforeUpdate (prevProps, prevState) {
  }

  _initIndustryCategory = () => {
    (async () => {
      await this._getIndustryCategory(0, 0)
      await this._getIndustryCategory(2, 1)
      await this._getIndustryCategory(1, 2)
    })().then()
  }

  _getIndustryCategory = (type, index) => {
    getIndustryCategory({ params: { type } }).then((data) => {
      const industries = this._getIndustries(data.data)
      this.tabScroll[index].industries = industries
    })
  }

  _getIndustries = (industries) => {
    return industries.reduce((totalValue, currentItem) => {
      const item = {
        title: currentItem.name,
        content: currentItem.industryCategories.map((innerItem) => {
          return {
            label: innerItem.name,
            type: this.categoryKey,
            value: [currentItem.name, innerItem.name]
          }
        })
      }
      totalValue.push(item)
      return totalValue
    }, [{
      title: '全部',
      content: [{ label: '全部', type: this.categoryKey, isAll: true }]
    }])
  }

  _getAreaListByCityName = () => {
    const { landmark: { cityName } = {} } = this.props
    const getAreaArr = (areas) => {
      const { landmark: { cityName } = {} } = this.props
      const areaContent = areas.reduce((totalValue, item) => {
        totalValue.push({
          label: item,
          value: this._isPageB() ? [item] : item,
          type: this.areaKey
        })
        return totalValue
      }, [{
        label: '全' + cityName,
        type: this.areaKey,
        isAll: true
      }])
      return [
        {
          title: null,
          content: areaContent
        }
      ]
    }
    getAreaListByCityName({
      params: {
        cityName
      }
    }).then((data) => {
      this.areaArr = getAreaArr(data.data)
    })
  }

  _isPageB = () => {
    return this.pageType === 'B'
  }

  /**
   * 首页名企加载
   * @private
   */
  _homeFamousList = () => {
    if (!this._isPageB()) {
      const { landmark: { cityName: city } = {} } = this.props
      homeFamousList({ params: { city } }).then((data) => {
        console.info(data)
        const { data: famous = [] } = data
        LayoutAnimation.easeInEaseOut()
        if (famous.length > 0) {
          // TODO
          if (!this.FamousSwiperHeightAdded) {
            this.moveAbleHeight = this.moveAbleHeight + FamousSwiperHeight
            this.FamousSwiperHeightAdded = true
          }
          this.setState({
            famous: famous.map((e, index) => ({ ...e, index }))
          })
        } else {
          if (this.FamousSwiperHeightAdded) {
            this.moveAbleHeight = this.moveAbleHeight - FamousSwiperHeight
            this.FamousSwiperHeightAdded = false
          }
          this.setState({
            famous: null
          })
        }
      })
    }
  }

  /**
   * 渲染头部
   * @returns {*}
   * @private
   */
  _renderHeader = () => {
    const { banners, famous } = this.state
    const { landmark: { cityName } = {} } = this.props
    return (
      <Fragment>
        <HomeHeader cityName={cityName} cityClick={this.cityClick} searchClick={this._searchClick}/>
        <HomeBanner swipers={banners} swiperClick={this._swiperClick}/>
        {famous && <FamousSwiper swipers={famous}/>}
      </Fragment>
    )
  }

  _onTabItemClick = (index) => {
    this.currentIndex = index
    const { landmark } = this.props
    this._scrollToOffsetByTpe(index)
    this.filterContentMaxH = new Animated.Value(0)
    this._setFilterState(this.tabScroll[index].filterArr.map((item) => {
      const newItem = {
        ...item,
        label: item.label,
        isActive: false
      }
      return newItem
    }))
    if (this.tabScroll[index].dataArr.length <= 0) {
      if (this._isPageB()) {
        const { BMineCenterStore: { haveCompanyApply: { companyId: thisCompanyId } } } = this.props
        if (thisCompanyId) {
          this.initRequestRefresh(thisCompanyId)
        } else {
          this._onRequestRefresh()
        }
      } else {
        this._onRequestRefresh()
      }
    } else if (this.tabScroll[index].cityName !== landmark.cityName) {
      this._onRequestRefresh()
    } else {
      if (this._isPageB()) { // B端
        this.changeRefresh({
          postSameCallBack: this._setDataFromCache,
          notPostCallBack: this._setDataFromCache,
          noCompanyIdCallBack: this._setDataFromCache
        })
      } else {
        this._setEndRefreshState(this.tabScroll[index].endRefreshState)
        this._setDataFromCache()
      }
    }
  }

  _setDataFromCache = () => {
    this._startHideItem(() => {
      this._setDataState(this.tabScroll[this.currentIndex].dataArr)
    })
  }

  changeRefresh () {
  }

  /**
   * 根据类型设置滚动位置
   * @param type
   * @private
   */
  _scrollToOffsetByTpe = (type) => {
    const currentFlatList = this.tabScroll[type]
    if (this.flatScroll >= this.moveAbleHeight) {
      if (currentFlatList.scrollValue < this.moveAbleHeight) {
        this._scrollToOffset(this.moveAbleHeight)
      } else {
        this._scrollToOffset(currentFlatList.scrollValue)
      }
    }
  }

  /**
   * 滚动到指定位置
   * @param flatList
   * @param value
   * @private
   */
  _scrollToOffset = (offset, animated = false) => {
    if (this.scrollableTabRef && this.scrollableTabRef.flatListRef) {
      this.scrollableTabRef.flatListRef.scrollToOffset({ offset, animated })
    }
  }

  _renderTabView = () => {
    const { filterArr } = this.state
    return (
      <TabFilter
        filterArr={filterArr}
        tabLabels={this.tabLabels}
        searchOpacity={this.searchOpacity}
        filterItemClick={this._filterItemClick}
        onTabItemClick={this._onTabItemClick}
        tabSearchClick={this._tabSearchClick}/>
    )
  }

  _tabSearchClick = () => {
    if (this.flatScroll >= searchHeight) this._searchClick()
  }

  _searchClick = () => {
    NavigationUtil.navigate('HomeSearch', {
      type: this.currentIndex
    })
  }

  /**
   * 过滤条件的点击
   * @param index
   * @private
   */
  _filterItemClick = (index) => {
    const { filterArr } = this.state
    const currentFilterArr = filterArr.map((item, i) => {
      const currentItem = item
      if (i === index) {
        currentItem.isActive = !currentItem.isActive
      } else {
        currentItem.isActive = false
      }
      return currentItem
    })
    const hasFilter = currentFilterArr.some((item) => {
      return item.isActive
    })
    if (hasFilter) {
      if (this.flatScroll < this.moveAbleHeight) {
        this._scrollToOffset(this.moveAbleHeight)
      }
      this._setFilterState(currentFilterArr, !hasFilter, () => {
        this._startAnimated()
      })
    } else {
      this._closeAnimated()
    }
  }

  _setFilterState = (filterArr, scrollEnabled = true, callback) => {
    this.setState({
      filterArr,
      scrollEnabled
    }, callback)
  }

  _startAnimated () {
    this._animatedStart(ScaleS(filterViewMaxH), 1)
  }

  _closeAnimated (callBack) {
    const { filterArr } = this.state
    const newFilterArr = filterArr.map((item) => {
      item.isActive = false
      return item
    })
    this._animatedStart(0, 0, () => {
      this._setFilterState(newFilterArr, true, callBack)
    })
  }

  _animatedStart = (maxHValue, opacityValue, callback) => {
    Animated.parallel([
      Animated.timing(
        this.filterContentMaxH,
        {
          toValue: maxHValue, // 透明度动画最终值
          duration: 300, // 动画时长3000毫秒
          easing: Easing.linear
        }
      ),
      Animated.timing(
        this.filterOpacity,
        {
          toValue: opacityValue, // 透明度动画最终值
          duration: 300, // 动画时长3000毫秒
          easing: Easing.linear
        }
      )
    ]).start(callback)
  }

  _renderInnerFirstView = () => {
    return this._isPageB() ? <TabHeaderBanner/> : null
  }

  childRender () {
    const { dataArr, hideItem, scrollEnabled, filterArr } = this.state
    return (
      <Fragment>
        <AnimatedScrollTabView
          ref={this._scrollableTabRef}
          style={[styles.scrollableTabView]}
          contentContainerStyle={[styles.containerStyle, { minHeight: HEIGHT + this.moveAbleHeight }]}
          dataArr={dataArr}
          hideItem={hideItem}
          scrollEnabled={scrollEnabled}
          keyExtractor={this._keyExtractor}
          renderHeader={this._renderHeader}
          renderTabView={this._renderTabView}
          renderInnerFirstView={this._renderInnerFirstView}
          renderItem={this.renderItem}
          onHeaderRefresh={this._onHeaderRefresh}
          onFooterRefresh={this._onFooterRefresh}
          onScroll={Animated.event([{
            nativeEvent: { contentOffset: { y: this.flatScrollValue } }
          }], {
            useNativeDriver: IS_IOS,
            listener: this._onScroll
          })}
          ListEmptyComponent={this._listEmptyComponent}
        />
        {
          !scrollEnabled && (
            <FilterContent
              workType={this.currentIndex}
              isPageB={this._isPageB()}
              filterViewMaxH={filterViewMaxH}
              filterArr={filterArr}
              filterOpacity={this.filterOpacity}
              filterContentMaxH={this.filterContentMaxH}
              orderLabel={this.orderLabel}
              topViewHeight={topViewHeight}
              borderTagClick={this._borderTagClick}
              getDataArr={this._getDataArr}
              filterBgClick={this._filterBgClick}
              closeFilter={this._closeAnimated}
            />
          )
        }
      </Fragment>
    )
  }

  /**
   * 根据筛选条件获取筛选的数据
   * @param index
   * @returns {[]}
   * @private
   */
  _getDataArr = (index) => {
    let dataArr = []
    switch (index) {
      case 1: // 职位
        if (this._isPageB()) {
          const { BMineCenterStore: { haveCompanyApply: { companyId } }, userId, userinfoB: { userId: userIdB } = {} } = this.props
          if (userId) { // 登录了
            if (userIdB) { // 完善信息
              if (companyId) { // 有公司ID
                if (this.withPostCategory[this.currentIndex].length > 0) { // 有数据
                  dataArr = this.withPostCategory[this.currentIndex]
                } else { // 没有数据
                  dataArr = [{ title: '1' }]
                }
              } else { // 没有公司ID
                dataArr = this.tabScroll[this.currentIndex].industries
              }
            } else { // 未完善信息
              dataArr = [{ title: '2' }]
            }
          } else { // 未登录
            dataArr = [{ title: '0' }]
          }
        } else { // C端
          dataArr = this.tabScroll[this.currentIndex].industries
        }
        break
      case 2: // 区域
        dataArr = this.areaArr
        break
      case 3: // 学历
        dataArr = this.educationArr
        break
    }
    return dataArr
  }

  _filterBgClick = () => {
    this._closeAnimated()
  }

  _listEmptyComponent = () => {
    return (
      <EmptyView emptyImg={require('src/imgC/home/home_no_data.png')} style={styles.emptyView} firstTip={'暂无相关数据'}/>
    )
  }

  /**
   * 标记的筛选
   * @param isActive
   * @param params
   * @private
   */
  _borderTagClick = (isActive, params) => {
    this._configRequestHeader(isActive, params)
    this._setFilterText(params, () => {
      this._closeAnimated(() => {
        this._onRequestRefresh()
      })
    })
  }

  _setFilterText = (params, callback) => {
    const { filterArr } = this.state
    const newFilterArr = filterArr.map((item) => {
      if (item.isActive) {
        item.label = params.firstLabel || params.label
        item.fullLabel = params.label
      }
      return item
    })
    this.tabScroll[this.currentIndex].filterArr = newFilterArr.map((item) => {
      const newItem = {
        ...item,
        // label: item.label,
        isActive: false
      }
      return newItem
    })
    this.setState({
      filterArr: newFilterArr
    }, callback)
  }

  /**
   * 配置请求头
   * @private
   */
  _configRequestHeader = (isActive, params) => {
    if (isActive) {
      if (params.isAll) {
        this._deleteHomeListParams(params.type)
      } else {
        this._addHomeListParams(params.type, params.value)
      }
    }
  }

  /**
   * 添加请求参数
   * @param key
   * @param value
   * @private
   */
  _addHomeListParams = (key, value) => {
    this.homeListParams[this.currentIndex][key] = value
  }

  /**
   * 删除请求参数
   * @param key
   * @private
   */
  _deleteHomeListParams = (key, index = this.currentIndex) => {
    const item = this.homeListParams[index]
    if (key in item) delete item[key]
  }

  _keyExtractor = (item) => {
    return item.id.toString()
  }

  _scrollableTabRef = (ref) => {
    this.scrollableTabRef = ref.getNode()._cFlatListRef
  }

  _onScroll = (event) => {
    this.tabScroll[this.currentIndex].scrollValue = this.flatScroll = event.nativeEvent.contentOffset.y
  }

  /**
   * 渲染每一条
   */
  renderItem () {

  }

  /**
   * 下来刷新
   * @private
   */
  _onHeaderRefresh = () => {
    // this._deleteHomeListParams(this.categoryKey)
    // this._deleteHomeListParams(this.orderKey)
    // this._deleteHomeListParams(this.areaKey)
    // this._deleteHomeListParams('education')
    // this._setFilterState(this._initFilterArr())
    this._onRequestRefresh(false)
  }

  /**
   * 请求刷新
   * @private
   */
  _onRequestRefresh = (showLoading = true) => {
    showLoading && ShowLoading()
    this.homeListParams[this.currentIndex][this.pageKey] = 1
    this._startHideItem(() => {
      this._homePostList().then((data) => {
        showLoading && DismissLoading()
        if (data.status === SUCCESS) {
          this._setDataState(iosAppFilter(data.data, ['basicInfoModel', 'name']), () => {
            this._setEndRefreshingState(data.data)
          })
        } else {
          this._setEndRefreshState(RefreshState.Failure)
        }
      })
    })
  }

  /**
   * 上拉加载
   * @private
   */
  _onFooterRefresh = () => {
    const currentPage = this.currentIndex
    this.homeListParams[currentPage][this.pageKey]++
    const dataArr = this.tabScroll[currentPage].dataArr
    this._homePostList().then((data) => {
      if (data.status === SUCCESS) {
        this._setDataState(dataArr.concat(iosAppFilter(data.data, ['basicInfoModel', 'name'])), () => {
          this._setEndRefreshingState(data.data)
        })
      } else {
        this.homeListParams[currentPage][this.pageKey]--
        this._setEndRefreshState(RefreshState.Failure)
      }
    })
  }

  /**
   * 请求数据
   * @returns {Promise}
   * @private
   */
  _homePostList = () => {
    const { landmark, userId } = this.props
    return new Promise((resolve) => {
      return this.postFunc()({
        params: {
          ...this.homeListParams[this.currentIndex],
          [this.cityNameKey]: landmark.cityName,
          userId
        }
      }).then((data) => {
        this.tabScroll[this.currentIndex].cityName = landmark.cityName
        resolve({
          status: SUCCESS,
          data: data.data
        })
      }).catch(() => {
        resolve({
          status: ERROR
        })
      })
    })
  }

  /**
   * 请求的接口必传
   */
  postFunc () {
  }

  _startHideItem = (callback) => {
    this.setState({
      hideItem: true
    }, callback)
  }

  _setDataState = (value, callback) => {
    this.tabScroll[this.currentIndex].dataArr = value
    this.setState({
      hideItem: false,
      dataArr: value
    }, callback)
  }

  _setEndRefreshingState = (data) => {
    if (data && data.length > 9) {
      if (this.endRefreshTime) {
        clearTimeout(this.endRefreshTime)
      }
      this.endRefreshTime = setTimeout(() => {
        this._setEndRefreshState(RefreshState.CanLoadMore)
      }, 500)
    } else {
      this._setEndRefreshState(RefreshState.NoMoreData)
    }
  }

  _setEndRefreshState = (state) => {
    this.tabScroll[this.currentIndex].endRefreshState = state
    this.scrollableTabRef.endRefreshing(state)
  }

  /**
   * 城市选择
   */
  cityClick = () => {
    const { landmark: { cityName } } = this.props

    NavigationUtil.navigate('CommonListCity', {
      cityName
    })
  }

  /**
   * 城市改变
   * @param cityName
   */
  cityChanged = cityName => {
    const resetFilterArr = () => {
      this.tabScroll.forEach((item) => {
        item.filterArr[2].label = '区域'
      })
      this.homeListParams.forEach((item, index) => {
        this._deleteHomeListParams(this._isPageB() ? 'workPlace' : 'area', index)
      })
      this._setFilterState(this.tabScroll[this.currentIndex].filterArr)
    }
    setImmediate(() => {
      const currentPage = this.currentIndex
      if (this.tabScroll[currentPage].cityName !== cityName) {
        resetFilterArr()
        this._getAreaListByCityName()
        this._homeFamousList()
        this._onRequestRefresh(true)
      }
    })
  }

  _swiperClick = data => {
    console.log('swiperClick', data)
  }
}

export default BaseHomePage

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  headerContainer: {
    width: '100%',
    height: 100,
    justifyContent: 'center'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  },
  scrollableTabView: {
    flex: 1
  },
  containerStyle: {
    // minHeight: HEIGHT + moveAbleHeight
  },
  emptyView: {
    height: HEIGHT - topViewHeight - NAVIGATIONBAR_BOTTOM_HEIGHT
  },
  tabHeaderView: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: 'white'
  },
  tabSearchBtn: {
    marginTop: ScaleS(36),
    marginRight: ScaleS(20)
  },
  tabSearchImg: {
    width: ScaleS(25),
    height: ScaleS(25)
  },
  filterView: {
    flexDirection: 'row',
    paddingHorizontal: ScaleS(20),
    height: ScaleS(52),
    alignItems: 'center',
    backgroundColor: 'white',
    justifyContent: 'space-between',
    borderBottomColor: 'rgba(120,120,120,0.2)',
    borderStyle: 'solid',
    borderBottomWidth: ONE_PIXEL
  },
  filterItemView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  filterText: {
    color: '#999999',
    fontSize: ScaleT(16),
    fontWeight: '500',
    marginRight: ScaleS(10)
  },
  filterActiveText: {
    color: '#444444'
  },
  filterImage: {
    width: ScaleS(5),
    height: ScaleS(4)
  },
  filterPositionView: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    zIndex: 2
  },
  filterNullView: {
    width: '100%',
    height: topViewHeight
  },
  filterBgOutView: {
    position: 'absolute',
    top: topViewHeight,
    width: '100%',
    height: '100%',
    backgroundColor: 'transparent'
  },
  filterBgView: {
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0,0,0,0.7)'
  },
  filterContentView: {
    position: 'absolute',
    top: 0,
    width: '100%',
    zIndex: 3,
    borderBottomRightRadius: ScaleS(10),
    borderBottomLeftRadius: ScaleS(10),
    overflow: 'hidden',
    borderTopColor: '#F7F7F7',
    borderStyle: 'solid',
    borderTopWidth: ONE_PIXEL,
    paddingHorizontal: ScaleS(20),
    backgroundColor: 'white'
  },
  contentContainer: {
    paddingBottom: ScaleS(23)
  },
  orderView: {},
  orderItemView: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: ScaleS(28),
    borderBottomColor: 'rgba(120,120,120,0.2)',
    borderStyle: 'solid',
    borderBottomWidth: ONE_PIXEL
  },
  orderItemText: {
    color: '#444444',
    fontSize: ScaleT(16),
    fontWeight: '400'
  },
  orderItemTextActive: {
    color: '#FFC61C'
  },
  orderItemImg: {
    width: ScaleS(15),
    height: ScaleS(10)
  },
  educationView: {
    paddingVertical: ScaleS(26)
  },
  educationTitle: {
    color: '#444444',
    fontSize: ScaleT(16),
    fontWeight: '500'
  },
  educationContentView: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  tagView: {
    marginLeft: ScaleS(16),
    marginTop: ScaleS(24)
  },
  tagText: {
    color: '#666666',
    fontSize: ScaleT(14),
    fontWeight: '400'
  }
})
// https://github.com/Micjoyce/ScrollViewWithTabView
